<template>
    <div class="recommend">
    <Card></Card>
        <ul>
            <li v-for="(item,index) of RecommendList" :key="index">
                <h2>
                    <img :src="item.imgUrl" alt="">
                </h2>
                <div class="describe">
                    <h3>{{item.name}}</h3>
                    <p>{{item.content}}</p>
                    <div class="price">
                        <span>¥</span>
                        <b>{{item.price}}</b>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import Card from "./Card.vue";
export default {
    props:{
        RecommendList:Array
    },
    components: {
        Card
    },
    data () {
        return {
           
        }
    },
    computed: {},
    watch: {},
    methods: {},
    created () {},
    mounted () {},
    beforeCreate () {},
    beforeMount () {},
    beforeUpdate () {},
    updated () {},
    beforeDestroy () {},
    destroyed () {},
    activated () {}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.recommend{
    ul{
        li{
            position: relative;
            .describe{
                position: absolute;
                right: 0;
                top: 0;
                display: flex;
                flex-direction: column;
                padding: .5333rem;
                h2{
                    font-size: .32rem;
                }
                p{
                    font-size: .4267rem;
                }
                .price{
                    margin-top: .6667rem;
                    color: red;
                    text-align: right;
                    span{
                        font-size: .3733rem;
                    }
                }
            }
            h2{
                text-align: center;
                img{
                    width: 9.6rem;
                    height: 3.84rem;
                    border-radius: .32rem;
                }
            }
        }
    }
}
</style>
